<script type="text/javascript">
	
$(function() {
		   
	$("#formularios").css("height","600px");
	
	jQuery("#exerciciosGrid").jqGrid({
			url:'actions/ajaxListarExercicios.php',
			editurl:'actions/exercicioAction.php',
            datatype:'json',
            mtype:'GET',
            jsonReader:
				{'repeatitems':false},
            pager:'#exerciciosPagerGrid',
            rowNum:20,
            rowList:
				[20,30,40,50],
            sortable:true,
            viewrecords:true,
            gridview:true,
            autowidth:false,
            height:370,
            width:780,
            shrinkToFit:true,
            forceFit:true,
            hidegrid:false,
            sortname:'id_exercicio',
            sortorder:'asc',
			caption: "Exercícios",
			grouping:true, 
			groupingView : { groupField : ['sala'] },
            colModel:[
                {label:'Código',width:30,align:'center',name:'id'},
				{label:'Titulo',width:50,align:'center',name:'exercicios',editable:true,edittype:"select",editoptions:{dataUrl:"actions/listaExerciciosGridAction.php"} },
				{label:'Sala',width:40,align:'left',name:'sala',editable:true,edittype:"select",editoptions:{dataUrl:"actions/listaSalasGridAction.php"} },
				{label:'Pergunta',width:70,align:'left',name:'pergunta',editable:true,editrules:{required:true}},
				{label:'Resposta 1',width:70,align:'left',name:'resposta_1',editable:true,editrules:{required:true}},
				{label:'Resposta 2',width:70,align:'left',name:'resposta_2',editable:true,editrules:{required:true}},
				{label:'Resposta 3',width:70,align:'left',name:'resposta_3',editable:true,editrules:{required:true}},
				{label:'Resposta 4',width:70,align:'left',name:'resposta_4',editable:true,editrules:{required:true}},
				{label:'Resposta 5',width:70,align:'left',name:'resposta_5',editable:true,editrules:{required:true}},
				{label:'Resposta Certa',width:80,align:'left',name:'resposta_ok', editable: true, edittype:"select",editoptions:{value:"1:Resposta 1;2:Resposta 2;3:Resposta 3;4:Resposta 4;5:Resposta 5"}}
            ] 
        });
	jQuery("#exerciciosGrid").jqGrid('navGrid', '#exerciciosPagerGrid', {del:true,add:true,edit:true,search:false,refresh:true} );
	
	
	$("#btnCadExerProf").click(function(){
		jQuery("#exerciciosGrid").jqGrid('editGridRow',"new",{height:400,width:500,reloadAfterSubmit:false});
	});
	
	
	$("#btnEditExercicios").click(function(){
		var gr = jQuery("#exerciciosGrid").jqGrid('getGridParam','selrow');
		if( gr != null ) jQuery("#exerciciosGrid").jqGrid('editGridRow',gr,{height:400,width:500,reloadAfterSubmit:false});
		else alert("Selecione um Registro");
	});
	
	
	$("#btnDelExercicios").click(function(){
		var gr = jQuery("#exerciciosGrid").jqGrid('getGridParam','selrow');
		if( gr != null ) jQuery("#exerciciosGrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
		else alert("Selecione um Registro");
	});
	
	$('#formTitulo').ajaxForm({
		dataType: 'json',
		beforeSubmit: function() {
			if( $("#formTitulo").validate().form()==false )
			return false;
		},
		success: function(responseText, statusText) {
			if(responseText.sucesso){
				$.jAlert(responseText.mensagem, '', function(result) {
					$('#cad_titulo').dialog('close');
					$('#txtTitulo').val('');
                });
			}else{
				$.jAlert(responseText.mensagem, '', function(result) {});
			}
		}

	})

	//busca salas
	$("#txtSala_id").load("actions/ajaxlistarSalasComboAction.php");
});

function cadTitulo(){
	$('#cad_titulo').dialog({show: "blind", hide: "explode", width:350, height:190, resizable:false}); 
}

function insereImagem(){	

	var exercicio_id = jQuery("#exerciciosGrid").jqGrid('getGridParam','selrow');
	
	if( exercicio_id == null ){
		$.jAlert("Selecione um Exercício", '', function(result) {});
	}else{		
		$("#exercicio_id").val(exercicio_id);		
		$('#imagem_exe').dialog({show: "blind", hide: "explode", width:450, height:210, resizable:false}); 
	}
}

</script>
    
<div id="formularios">

<fieldset style="height:600px;width:800px;padding:2px;">

    <legend>
        <img src="images/topoPaginas/Icon_Escola_Menu.png"/>
    </legend>
    
    
    <div id="btnSairForms">
        <a href="/?pg=home" title="Sair" style="border:0;">
            <img src="images/btnOutros/btnSairForms.png"/>
        </a>
    </div>
    <div style="position:relative;left:10px;"> 
    
    	<input type="button" id="btnCadExercicios" name="btnCadExercicios" value="Cadastrar Título" onclick="cadTitulo();"/>
        <input type="button" id="btnCadExerProf" name="btnCadExerProf" value="Cadastrar"/>
        <input type="button" id="btnEditExercicios" name="btnEditExercicios" value="Editar"/>
        <input type="button" id="btnDelExercicios" name="btnDelExercicios" value="Excluir"/>
        <input type="button" id="btnVincula" name="btnVincula" value="Vincular Imagem/Video" onclick="insereImagem();"/>
        
        <br /><br />
    
        <table id="exerciciosGrid" ></table>
        <div id="exerciciosPagerGrid"></div>    
        
    </div>
</fieldset>

<div id="cpTitulo" style="display:none;">
	<div id="cad_titulo" title="Cadastrar um Título para o Trabalho">
    <form action="actions/cadastraTituloExerciciosAction.php" method="post" id="formTitulo" name="formTitulo">
    	<input type="text" name="txtTitulo" id="txtTitulo" class="required"/>
        <br/><br />
        <select id="txtSala_id" name="txtSala_id">        	
        </select>
        <br /><br />
        <input type="submit" value="Cadastrar" />
    </form>
    </div>
</div>

</div>

<script src="js/upload/jquery.form.js" type="text/javascript"></script>
<script>

$(function() {
			   
	$('#formUpload').ajaxForm({    
		success: function(data) {               
			if(data.sucesso == true){
				$("#div_video").show();
				$("#div_imagem").hide();
				$('#imagem_exe').dialog('close');
			}
			else{
				$.jAlert(data.msg, '', function(result) {});
			}                
		},
		error : function(){
			$.jAlert('Erro ao enviar requisição!!!', '', function(result) {});
		},
		dataType: 'json',
		url: "actions/uploadArquivoExerciciosAction.php",
		resetForm: true
	})

})

function mudaArquivo(tipo){
	
	if(tipo=="I"){
		$("#div_imagem").show();
		$("#div_video").hide();
	}else{
		$("#div_video").show();
		$("#div_imagem").hide();		
	}	
}

</script>

<div id='imagem_exe' title='Inserir Imagem/Video' style='text-align:left;margin-left:20px;'>
<form name="formUpload" id="formUpload" method="post">
    <input type="hidden" id="exercicio_id" name="exercicio_id" />
    <br />
    <select id="tipo_arquivo" name="tipo_arquivo" onchange="mudaArquivo(this.value);">
    	<option value="V">Video</option>
    	<option value="I">Imagem</option>
    </select>
    <br /><br />
    <div id="div_imagem" style="display:none;">
    	<input type="file" name="txtImagem" id="txtImagem" size="25" />
    </div>
    
    <div id="div_video">
    	<input type="text" name="txtVideo" id="txtVideo" size="40" />
    </div>
    <br /><br />
    <span style="padding-left:100px;">
        <input type="submit" id="btnEnviar" value="Enviar" />
        <input type="button" id="btnFechar" name="btnFechar" value="Fechar" onClick="$('#imagem_exe').dialog('close');" />
    </span>
</form>
</div>